<template>
    <div class="component-container">
        <div class="tables-container">
            <!-- <a-tabs v-model:activeKey="activeKey" tab-position="left" @change="checkTable" :style="{ height: '500px' }">
                <a-tab-pane
                    v-for="table in props.tableList"
                    :key="table.TABLE_NAME"
                    :tab="table.TABLE_NAME"
                >{{ table.TABLE_NAME }}</a-tab-pane>
            </a-tabs> -->
            <a-tree
                draggable
                block-node
                :tree-data="treeData"
                :show-line="true"
                @select="treeSelect"
                :autoExpandParent="true"
            />
        </div>
        <div class="content-container">
            <a-spin :spinning="props.columnsSpinning">
                <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="generateEntity(props.columnList)" :disabled="props.columnList?.length < 1">生成实体</a-button>
                <a-table :dataSource="props.columnList" :columns="columns" size="small" :pagination="false" />
            </a-spin>
        </div>
    </div>
</template>
<script setup>

import router from '@/router';
import { computed, onMounted, ref } from 'vue';

const props = defineProps(["databaseList", "tableList", "columnList", "columnsSpinning"]);
const emits = defineEmits(['checkDatabase', 'checkTable'])

const table = ref('');

const treeData = computed(() => {
    const result = props.databaseList.map((database) => ({
        title: database.Database,
        key: database.Database,
        children: database.tables?.map((table) => ({
            title: table.TABLE_NAME,
            key: table.TABLE_NAME
        })) || []
    }));

    return result;
});

const treeSelect = (selectedKeys, event) => {
    console.log('treeSelect', event);

    if (event.node.pos.split('-').length === 2) {
        emits('checkDatabase', selectedKeys[0]);
    }

    if (event.node.pos.split('-').length === 3) {
        emits('checkTable', event.node.parent.key, selectedKeys[0]);
    }
}

// const activeKey = ref('');

// const checkTable = function (activeKey) {
//     emits("checkTable", activeKey);
// }

const columns = ref([
    {
        title: '字段名',
        dataIndex: 'Field',
        key: 'Field',
    },
    {
        title: '字段类型',
        dataIndex: 'Type',
        key: 'Type',
    },
    {
        title: '键属性',
        dataIndex: 'Key',
        key: 'Key',
    },
    {
        title: '自增',
        dataIndex: 'Extra',
        key: 'Extra',
    },
    {
        title: '是否可空',
        dataIndex: 'Null',
        key: 'Null',
    }
]);

const generateEntity = (columnList) => {
    localStorage.setItem('GenerateEntityContent', JSON.stringify(columnList));
    router.push({ name: 'module' });
};
</script>
<style scoped>
.component-container {
    display: flex;
}
.tables-container {
    flex-shrink: 0;
}
.content-container {
    flex-grow: 1;
}

.component-container .ant-tabs-tabpane {
    width: 0;
    display: none;
}
</style>